<template>
  <div>
    <img
      @click="editCropper()"
      v-bind:src="options.img"
      title="点击上传头像"
      class="img-circle img-lg cursor-pointer"
    />
    <!-- <img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /> -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      :before-close="close"
      custom-class="avatar_el_dialog_width"
    >
      <el-row>
        <el-col :span="12" :xs="24" class="box_in_row">
          <el-row>
            <el-col :span="24" class="box_row">
              <vue-cropper
                ref="cropper"
                :img="options.img"
                :info="true"
                :autoCrop="options.autoCrop"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                :fixedBox="options.fixedBox"
                @realTime="realTime"
              />
            </el-col>
            <el-col :span="24">
              <br />
              <el-row>
                <el-col :span="4">
                  <el-upload
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    action="http://192.168.8.39:9700/imags"
                  >
                    <el-button size="small">
                      上传
                      <i class="el-icon-upload el-icon--right"></i>
                    </el-button>
                  </el-upload>
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
                </el-col>
                <el-col :span="4">
                  <el-button
                    type="primary"
                    size="small"
                    @click="uploadImg()"
                    :loading="uploading"
                  >上 传</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" :xs="24" class="box_row">
          <div class="avatar-upload-preview">
            <div class="img_box" v-loading="uploading">
              <el-image :src="previews.url" :style="previews.img" class="cursor-pointer"></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
// import { uploadAvatar } from "@/api/system/user";

export default {
  components: { VueCropper },
  props: {
    user: {
      type: Object,
    },
  },
  data() {
    return {
      uploading: false, //上传中
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "修改头像",
      options: {
        img: null, //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
      },
      previews: {},
    };
  },
  created() {
    this.avatarInfo();
  },
  methods: {
    // 初始化头像
    avatarInfo() {
      // this.options.img = this.$store.getters.avatar;
      this.options.img = require('@/assets/avatar.png');
    },
    // 编辑头像
    editCropper() {
      this.open = true;
    },
    // 关闭编辑
    close(done) {
      console.log(done)
      this.open = false;
      this.avatarInfo();
    },
    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file); //读取file对象 bgse64
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
    // 上传图片
    uploadImg() {
      this.uploading = true;
      this.$refs.cropper.getCropBlob((data) => {
        let formData = new FormData();
        formData.append("avatarfile", data); //追加一条数据
        // uploadAvatar(formData).then((response) => {
        //   if (response.code === 200) {
        //     let avatar = process.env.VUE_APP_BASE_API + response.imgUrl;
        //     this.$store.commit("SET_AVATAR", avatar);
        //     this.close();
        //     this.msgSuccess("修改成功");
        //   } else {
        //     this.msgError(response.msg);
        //   }
        //   this.uploading = false;
        //   this.$refs.cropper.clearCrop();
        // });
      });
    },
    // 实时预览
    realTime(data) {
      this.previews = data;
    },
  },
  computed: {
    /* 图片地址处理-区分网络图片、文件流 */
    dowUrl() {
      if (this.options.img.indexOf("data:image/") == -1)
        return this.options.img + "?time=" + new Date().valueOf();
      return this.options.img;
    },
  },
};
</script>